<template>
  <div class="fixed-header fixed-footer">
    <x-header in-app-close>最近开奖</x-header>
    <div class="bg-white text-center">
      <div class="text-grey py-3" @click="popup = true"><i class="iconfont icon-calendar"></i> 第{{wl.lotteryNo}}期 {{wl.prizeTime}}</div>
      <div class="results mb-1">
        <em v-for="m in ms"><i v-text="m.matchResult"></i></em>
      </div>
      <div class="results b-l mb-3">
        <em class="team" v-for="m in ms">
          <b class="">{{m.hostShort}}</b>
          <a>vs</a>
          <b>{{m.guestShort}}</b>
        </em>
      </div>
    </div>

    <popup v-model="popup" position="bottom">
      <picker ref="picker" title="选择期号" :columns="nos" :show-toolbar="true" @cancel="popup = false" @confirm="confirm"/>
    </popup>

    <div class="d-flex bg-white text-center py-3 mt-3">
      <div class="flex-grow">
        <div class="text-grey font-lg mb-2">胜负彩销量</div>
        <div class="font-xxl text-red">{{wl.fullSaleAmount | format}}元</div>
      </div>
      <div class="flex-grow bl-l">
        <div class="text-grey font-lg mb-2">任选九销量</div>
        <div class="font-xxl text-red">{{wl.nineSaleAmount | format}}元</div>
      </div>
    </div>

    <div class="bg-white text-center bonus px-5 mt-3 py-4">
      <div class="d-flex text-grey font-lg mb-2">
        <div class="box-xl">奖级</div>
        <div class="box-xl">中奖注数</div>
        <div class="box-xl">每注奖金</div>
      </div>
      <div class="d-flex py-1 bg-red">
        <div class="box-xl">一等奖</div>
        <div class="box-xl">{{wl.fullFirstHits}}</div>
        <div class="box-xl text-red">{{wl.fullFirstPrize | format}}元</div>
      </div>
      <div class="d-flex py-1">
        <div class="box-xl">二等奖</div>
        <div class="box-xl">{{wl.fullSecondHits}}</div>
        <div class="box-xl text-red">{{wl.fullSecondPrize | format}}元</div>
      </div>
      <div class="d-flex py-1 bg-red mb-4">
        <div class="box-xl">任选九</div>
        <div class="box-xl">{{wl.nineFirstHits}}</div>
        <div class="box-xl text-red">{{wl.nineFirstPrize | format}}元</div>
      </div>
    </div>

    <footer class="d-flex justify-content-around bg-white p-2 bt-l">
      <a @click="jump('/winlose?rule=sfc')" class="btn btn-danger">继续选择胜负彩</a>
      <a @click="jump('/winlose?rule=r9')" class="btn btn-danger">继续选择任选九</a>
    </footer>

  </div>

</template>

<script>
import { Picker, Popup } from 'vant'
import { jump } from '../../router'
import http from '../../http'

export default {
  components: {Popup, Picker},
  name: 'winlose-prizes',
  data: () => ({
    popup: false,
    nos: [],
    wl: {
      fullSaleAmount: 0,
      fullFirstHits: 0,
      fullFirstPrize: 0,
      fullSecondHits: 0,
      fullSecondPrize: 0,
      nineSaleAmount: 0,
      nineFirstHits: 0,
      nineFirstPrize: 0
    },
    ms: []
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/winlose/prize', {nos: true}).then(res => {
      next(vm => {
        vm.nos = res.nos
        vm.wl = res.winlose
        vm.ms = res.matches
      })
    })
  },
  methods: {
    confirm (no, idx) {
      this.$toast.loading()
      http.post('/winlose/prize', {no}).then(res => {
        this.wl = res.winlose
        this.ms = res.matches
        this.popup = false
        this.$toast.clear()
      })
    },
    jump
  }
}
</script>

<style lang="scss">
  @import "../../assets/css/theme";
  .results {
    display: inline-flex;
    em {
      display: inherit;
      justify-content: center;
      color: $font-color-dark;
      line-height: 1.3;
      padding: .25rem 0;
      width: 1.85rem;
    }
    a { color: $color-grey; margin: .5rem 0 }
    b { overflow: hidden; height: 5rem }
    i {
      background: $color-green;
      padding: .25rem .35rem;
      border-radius: 3px;
      color: #fff;
    }
    .team {
      flex-direction: column;
      &:nth-child(even) {
        background: $color-red-light;
      }
    }
  }
</style>
